<!-- 隔间设置 -->
<template>
  <div class="pan-header">
    <el-select
      class="selectPan"
      v-model="aisleID"
      placeholder="请选要展示的产线"
      size="large"
      @visible-change="aisleIdChange"
      clearable
    >
      <el-option
        v-for="item in optionsaisleIds"
        :key="item.aisleId"
        :label="item.aisleName"
        :value="item.aisleId"
      />
    </el-select>
    <el-button
      class="addPan"
      type="primary"
      @click="addPan"
      :disabled="adddisabled"
      >添加隔间</el-button
    >
    <el-popconfirm title="确定要全部删除吗？" @confirm="RemovePan(AkeypanId)">
      <template #reference>
        <el-button type="danger" :loading="removeloading" :disabled="disabled"
          >一键删除</el-button
        >
      </template>
    </el-popconfirm>
  </div>
  <!-- 隔间的展示 -->
  <el-table
    :data="tableData"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange"
    v-loading="loading"
  >
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column type="index" label="序号" width="80" align="center" />
    <el-table-column
      prop="panName"
      label="隔间名称"
      width="120"
      align="center"
    />
    <el-table-column
      prop="panNumber"
      label="隔间编号"
      width="120"
      align="center"
    />
    <el-table-column
      prop="aisleName"
      label="产线名称"
      width="120"
      align="center"
    />
    <el-table-column prop="deviceName" label="设备名称" align="center" />
    <el-table-column
      prop="lastUpdateTime"
      label="最后更新时间"
      width="180"
      align="center"
    />
    <!-- 自定义内容 -->
    <el-table-column prop="panX" label="油嘴高度" align="center">
      <template #default="scope">
        <div>
          <span style="margin-left: 10px">{{ scope.row.panX }} mm</span>
        </div>
      </template>
    </el-table-column>
    <!-- 自定义内容 -->
    <el-table-column label="丝钩油嘴高度" align="center">
      <template #default="scope">
        <div>
          <span style="margin-left: 10px">{{ scope.row.panY }} mm</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="150" align="center">
      <template #default="scope">
        <!-- 修改 -->
        <el-button
          type="primary"
          :icon="Edit"
          circle
          @click="showDrawerClick(scope.row)"
        />
        <!-- 删除 -->
        <el-popconfirm title="确定要删除吗？" @confirm="RemovePan(scope.row)">
          <template #reference>
            <el-button
              type="danger"
              :loading="scope.row.loading"
              :icon="Delete"
              circle
            />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <Drawer
    :showDrawer="showDrawer"
    @clickShow="clickShow"
    :amendPan="amendPan"
    :title="title"
  />
</template>

<script setup>
import { ref, watch, reactive } from 'vue'
import { aisleInfo } from '@/api/aisle'
import { panInfo, removePan } from '@/api/pan'
import { Delete, Edit } from '@element-plus/icons-vue'
import Drawer from './components/Drawer'
import { ElMessage } from 'element-plus'

// 添加是否可点击 默认不可点击
const adddisabled = ref(true)

// 选中的产线id
const aisleID = ref('')
// 所有的产线id 进行选择
const optionsaisleIds = ref([])
// 这里用在 数据发生改变调用的 loading
const loading = ref(false)
// 调用 产线接口获取所有产线id
const aisleIdChange = (val) => {
  // console.log(val)
  if (val) {
    aisleInfo({}).then((res) => {
      // console.log(res)
      // 只需要产线的id 和name  把这两个去出来
      optionsaisleIds.value = res.data.map((item) => {
        const obj = {}
        obj.aisleName = item.aisleName
        obj.aisleId = item.aisleId
        return obj
      })
      console.log(optionsaisleIds)
    })
  }
}
/**
 *  查询设备信息
 *  参数 产线id
 */
const getPanInfo = (val) => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    panInfo({ aisleid: val }).then((res) => {
      // console.log(res)
      tableData.value = res.data.map((item) => {
        // 吧当前选中的产线id 添加到数据中
        console.log(res)
        item.aisleId = val
        return item
      })
    })
  }, 300)
}
// 定义 tableData 用来接收存储数据
const tableData = ref([])
// 监听选择器的变化  如果选择产线id则展示隔间信息
watch(
  () => aisleID.value,
  (val) => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      // 判断选择器的值是不是空  根据窜则器的值进行处理
      aisleID.value = val
      if (val !== '') {
        adddisabled.value = false
        // 调用隔间信息接口
        getPanInfo(val)
      } else {
        tableData.value = ''
        adddisabled.value = true
      }
    }, 300)
  }
)

/**
 *  新增修改相关
 */

// 抽屉的显示隐藏
const showDrawer = ref(false)
// 抽屉 title
const title = ref('')
// 如果是修改 点击获取当前行信息
const amendPan = reactive({})
// 点击添加隔间
const addPan = () => {
  title.value = '添加隔间'
  Object.keys(amendPan).forEach((key) => {
    if (key === 'deviceId') {
      amendPan[key] = null
    } else {
      amendPan[key] = ''
    }
  })
  showDrawer.value = true
}
// 接收子集传递来的值 用来响应 抽屉的展示隐藏
const clickShow = (val, data) => {
  showDrawer.value = val
  console.log(val)
  if (data === '00000') {
    getPanInfo(aisleID)
  }
  /**
   * 如果抽屉关闭 则清空数据
   */
  Object.keys(amendPan).forEach((key) => {
    amendPan[key] = ''
  })
}
/**
 *  修改隔间
 */
// 点击修改隔间
const showDrawerClick = (scope) => {
  // console.log(scope)
  title.value = '修改隔间'
  // 抽屉显示
  showDrawer.value = true
  // 传递点击当前行的数据
  Object.assign(amendPan, scope)
}
/**
 * 删除隔间
 */

// 获取所有选中的隔间 id
const AkeypanId = ref([])
// 一键删除 是否可点击  默认不可点击
const disabled = ref(true)
const removeloading = ref(false)
// 获取 所有选中的数据
const handleSelectionChange = (val) => {
  if (val.length > 0) {
    disabled.value = false
  } else {
    disabled.value = true
  }
  // console.log(val)
  AkeypanId.value = val
}
// 点击删除
const reomve = (data) => {
  //  筛选数据 吧数据为 panId 的全部筛选出来并(返回)保存
  const panIds = data.map((item) => {
    return item.panId
  })

  removePan({ panId: panIds })
    .then((res) => {
      console.log(res)
      loading.value = true
      setTimeout(() => {
        loading.value = false
        getPanInfo(aisleID)
        ElMessage({
          message: res.message,
          type: 'success'
        })
      }, 300)
    })
    .catch((err) => {
      ElMessage({
        message: err.message,
        type: 'success'
      })
    })
}
const RemovePan = (tableData) => {
  // 判断是不是数组 如果是 则不变 如果不是则转换成数组
  if (tableData instanceof Array) {
    tableData = tableData
    removeloading.value = true
    setTimeout(() => {
      removeloading.value = false
    }, 300)
    reomve(tableData)
  } else {
    tableData.loading = true
    setTimeout(() => {
      tableData.loading = false
      tableData = [tableData]
      reomve(tableData)
    }, 300)
  }
}
</script>

<style lang="scss" scoped>
.pan-header {
  margin-bottom: 2.5vh;
}
.selectPan {
  margin-right: 1vw;
}
</style>
